<template>
    <div  class="app-container">
         <el-row :gutter="20">
            <!--用户数据-->
            <el-col  :xs="24">
               <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" >
                  
                  <el-form-item  prop="name_tel">
                     <el-input
                        v-model="queryParams.name_tel"
                        placeholder="请输入姓名/手机号"
                        clearable
                        style="width: 200px"
                        @keyup.enter="handleQuery"
                     />
                  </el-form-item>
                  <el-form-item  prop="contract_code">
                     <el-input
                        v-model="queryParams.contract_code"
                        placeholder="请输入合同编号"
                        clearable
                        style="width: 200px"
                        @keyup.enter="handleQuery"
                     />
                  </el-form-item>
                  <el-form-item  prop="apply_id">
                     <el-input
                        v-model="queryParams.apply_id"
                        placeholder="请输入担保编号"
                        clearable
                        style="width: 200px"
                        @keyup.enter="handleQuery"
                     />
                  </el-form-item>
                  <el-form-item  prop="classify">
                     <el-select
                        v-model="queryParams.classify"
                        placeholder="处理意见"
                        clearable
                        style="width: 200px"
                     >
                        <el-option
                           v-for="dict in ideaType"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                        />
                     </el-select>
                  </el-form-item>
                  <el-form-item  style="width: 300px;" prop="dateRange">
                     <el-date-picker
                        v-model="queryParams.dateRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change = dateChange
                     ></el-date-picker>
                  </el-form-item>
                  <el-form-item>
                     <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                     <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                  </el-form-item>
               </el-form>
   
               <el-row :gutter="10" class="mb8">
                  <!-- <el-col :span="1.5">
                     <el-button
                        type="warning"
                        plain
                        icon="Download"
                        @click="handleExport"
                        v-hasPermi="['system:user:export']"
                     >导出</el-button>
                  </el-col> -->
                  <el-col :span="1.5">
                     <el-button
                        type="primary"
                        plain
                        icon="Plus"
                        @click="handleAdd"
                        v-hasPermi="['system:user:add']"
                     >新增</el-button>
                  </el-col>
                  <right-toolbar  v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
               </el-row>
   
               <el-table v-loading="loading" :data="loanList" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="50" align="center" />
                  <el-table-column label="报告编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
                  <el-table-column label="担保编号" align="center" key="apply_id" prop="apply_id" v-if="columns[1].visible"  />
                  <el-table-column label="姓名" align="center" key="user_name" prop="user_name" v-if="columns[2].visible"  />
                  <el-table-column label="合同金额" align="center" key="contract_amount" prop="contract_amount" v-if="columns[3].visible"  />
                  <el-table-column label="担保期限" align="center" key="loan_stages" prop="loan_stages" v-if="columns[4].visible"  />
                  <el-table-column label="担保类型" align="center" key="loan_type_name" prop="loan_type_name" v-if="columns[5].visible"  />
                  <el-table-column label="还款方式" align="center" key="loan_method_type" prop="loan_method_type" v-if="columns[6].visible"  />
                  <el-table-column label="保后检查时间"  align="center" key="inspect_time" prop="inspect_time" v-if="columns[7].visible" :show-overflow-tooltip="true" />
                  <el-table-column label="检查方式" align="center" key="method_type" prop="method_type" v-if="columns[8].visible"  />
                  <el-table-column label="检查原因" align="center" key="cause_type" prop="cause_type" v-if="columns[9].visible"  />
                  <el-table-column label="保后处理意见" align="center" key="classify_type" prop="classify_type" v-if="columns[10].visible"  >
                     <template #default="scope">
                        <div v-if="scope.row.flag" style="color:red">{{scope.row.remark}}</div>
                        <div v-else >{{scope.row.remark}}</div>
                     </template>
                  </el-table-column>
                  <el-table-column label="保后建议" align="center" key="suggestion" prop="suggestion" v-if="columns[11].visible"  />
                  <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding fixed-width">
                     <template #default="scope">
                        <el-tooltip content="查看" placement="top" >
                           <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                        </el-tooltip>
                     </template>
                  </el-table-column>
               </el-table>
               <pagination
                  v-show="total > 0"
                  :total="total"
                  v-model:page="queryParams.page_size"
                  v-model:limit="queryParams.page_count"
                  @pagination="getList"
               />
            </el-col>
         </el-row>
         <!-- 用户导入对话框 -->
         <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
            <el-upload
               ref="uploadRef"
               :limit="1"
               accept=".xlsx, .xls"
               :headers="upload.headers"
               :action="upload.url + '?updateSupport=' + upload.updateSupport"
               :disabled="upload.isUploading"
               :on-progress="handleFileUploadProgress"
               :on-success="handleFileSuccess"
               :auto-upload="false"
               drag
            >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
               <template #tip>
                  <div class="el-upload__tip text-center">
                     <div class="el-upload__tip">
                        <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                     </div>
                     <span>仅允许导入xls、xlsx格式文件。</span>
                     <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
                  </div>
               </template>
            </el-upload>
            <template #footer>
               <div class="dialog-footer">
                  <el-button type="primary" @click="submitFileForm">确 定</el-button>
                  <el-button @click="upload.open = false">取 消</el-button>
               </div>
            </template>
         </el-dialog>
    </div>
 </template>
 
 <script setup name="Check">
 import { methodType ,classifyType ,loanTypes ,methodWayType,causeType} from '@/utils/dict'
 import { getToken } from "@/utils/auth";
 import {  loanInspectList  } from "@/api/afterLoan/index";
 const router = useRouter();
 const { proxy } = getCurrentInstance();
//  const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

 const loanList = ref([]);
 const open = ref(false);
 const loading = ref(false);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const deptName = ref("");
 const deptOptions = ref(undefined);
 const initPassword = ref(undefined);
 const postOptions = ref([]);
 const roleOptions = ref([]);
 const ideaType = ref([
     {
       value:"1",
     label:"正常担保"
   },{
     value:"2",
     label:"关注担保"
     },{
     value:"3",
     label:"次级担保"
     },{
     value:"4",
     label:"可疑担保"
     },{
     value:"5",
     label:"损失担保"
     }
 ])
 /*** 用户导入参数 */
 const upload = reactive({
   // 是否显示弹出层（用户导入）
   open: false,
   // 弹出层标题（用户导入）
   title: "",
   // 是否禁用上传
   isUploading: false,
   // 是否更新已经存在的用户数据
   updateSupport: 0,
   // 设置上传的请求头部
   headers: { Authorization: "Bearer " + getToken() },
   // 上传的地址
   url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
 });
 // 列显隐信息
 const columns = ref([
   { key: 0, label: `报告编号`, visible: true },
   { key: 1, label: `担保编号`, visible: true },
   { key: 2, label: `姓名`, visible: true },
   { key: 3, label: `合同金额`, visible: true },
   { key: 4, label: `担保期限`, visible: true },
   { key: 5, label: `担保类型`, visible: true },
   { key: 6, label: `还款方式`, visible: true },
   { key: 7, label: `保后检查时间`, visible: true },
   { key: 8, label: `检查方式`, visible: true },
   { key: 9, label: `检查原因`, visible: true },
   { key: 10, label: `保后处理意见`, visible: true },
   { key: 11, label: `保后建议`, visible: true }
 ]);
 const data = reactive({
   queryParams: {
      page_size: 1,
      page_count: 10,
     classify:undefined,
     start_time: undefined,
     end_time: undefined,
     name_tel:undefined,
     user_name: undefined,
     user_phone: undefined,
     apply_id: undefined,
     contract_code: undefined,
     dateRange:undefined
   }
 });
 
 const { queryParams } = toRefs(data);
 /**时间处理*/
 function dateChange(val){
   queryParams.value.start_time = queryParams.value.dateRange[0]+' 00:00:00';
     queryParams.value.end_time = queryParams.value.dateRange[1]+' 23:59:59' ;
 }
 /** 查询用户列表 */
 function getList() {
   loading.value = true;
      queryParams.value.user_phone = queryParams.value.name_tel;
      queryParams.value.user_name = queryParams.value.name_tel;
   loanInspectList(queryParams.value).then(res => {
      loading.value = false;
      total.value = res.data.total_page;
      if(res.data.total_page>0){
      loanList.value = res.data.list.map(item=>{
              item['loan_type_name'] = loanTypes(item.loan_type);
              item['loan_method_type'] = methodType(item.loan_method);
              item['method_type'] = methodWayType(item.method);
              item['cause_type'] = causeType(item.cause);
              item['classify_type'] = classifyType(item.classify);
                  return item;
      })
    }else{
      loanList.value = []
    }
   });
 };
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.page_size = 1;
   getList();
 };
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
     queryParams.value.start_time = '';
     queryParams.value.end_time = ''
     handleQuery();
 };
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download("loan/export/loanInspectList", {
      ...queryParams.value,
   });
 };
 /** 选择条数  */
 function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.userId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
 /** 下载模板操作 */
 function importTemplate() {
   proxy.download("system/user/importTemplate", {
   }, `user_template_${new Date().getTime()}.xlsx`);
 };
 /**文件上传中处理 */
 const handleFileUploadProgress = (event, file, fileList) => {
   upload.isUploading = true;
 };
 /** 文件上传成功处理 */
 const handleFileSuccess = (response, file, fileList) => {
   upload.open = false;
   upload.isUploading = false;
   proxy.$refs["uploadRef"].handleRemove(file);
   proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
   getList();
 };
 /** 提交上传文件 */
 function submitFileForm() {
   proxy.$refs["uploadRef"].submit();
 };
 /** 新增按钮操作 */
 function handleAdd() {
   router.push('entering')
 };
 /** 查看按钮操作 */
 function handleView(row) {
   router.push({
      path:"/after-loan/entering",
      query:{
         apply_id:row.apply_id,
         id:row.id
      }
   })
 };
 getList();
 onActivated(()=>{
   let timer = setTimeout(()=>{
     getList();
     clearTimeout(timer)
   },1100)
})
 </script>
 <style scoped>
 .explain{
    line-height: 40px;
    font-size: 12px;
    margin-left:90px;
 }
 </style>
 